import React, { Component, Suspense } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Tabs } from 'antd';
import PageLoading from './components/PageLoading';
import { connect, Dispatch } from 'umi';
import SystemLog from './components/SystemLog';
import DeviceLog from './components/DeviceLog';
import OrderLog from './components/OrderLog';
import LoginLog from './components/LoginLog';
import { AnalysisData } from './data.d';
import styles from './index.less';

const { TabPane } = Tabs;

function callback(key) {
  console.log(key);
}

class logComponet extends Component {
  render() {
    return (
      <PageContainer>
        <section className={styles.tabContainer}>
          <Tabs onChange={callback} type="card">
            <TabPane tab="系统日志" key="1">
              <SystemLog />
            </TabPane>
            <TabPane tab="设备日志" key="2">
              <DeviceLog />
            </TabPane>
            <TabPane tab="命令日志" key="3">
              <OrderLog />
            </TabPane>
            <TabPane tab="登录日志" key="4">
              <LoginLog />
            </TabPane>
          </Tabs>
        </section>
      </PageContainer>
    );
  }
}
export default connect(
  ({
    dashboardAndDashboardAnalysis,
    loading,
  }: {
    dashboardAndDashboardAnalysis: any;
    loading: {
      effects: { [key: string]: boolean };
    };
  }) => ({
    dashboardAndDashboardAnalysis,
    loading: loading.effects['dashboardAndDashboardAnalysis/fetch'],
  }),
)(logComponet);
